<template>
  <div>
    <div class="news-layout">
      <div style="margin-top:50px;">
        <div class="news_list" >
          <ul>
            <li v-for="(item,index) in listData" :key="index" @click="articleDetail(item)">
              <h1>发表时间：{{ item.createdTime }}</h1>
              <a href=""><img width="250" height="146" style="padding: 16px;" :src="$store.state.baseImgUrl+item.img"></a>
              <div style="padding:30px 30px 25px 30px;height: 12em;">
                <h2><a href="" title="">{{ item.title }}</a></h2>
                <p>{{ item.description }}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Main",
  data(){
    return{
      articleId:null,
      userId:null,
      // 文章点击量
      clickCount:null
    }
  },
  props:{
    listData:{
      type: Array,
      require: true
    }
  },
  methods:{
    articleDetail(item){
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();



      }, 2000);
      this.articleId = item.id
      this.clickCount = item.view
      this.$router.push({path:'/articleDetail', query:{id: this.articleId,userId:this.userId,clickCount:this.clickCount}})

    },

  },
  created() {
    if(window.sessionStorage.getItem('username')){
      this.getRequest('/cms/user/info',window.sessionStorage.getItem('username')).then((resp)=>{
        this.userId = resp.data.id
      })
    }

  }
}
</script>

<style scoped>
.news-layout {
  width: 960px;
  margin: 0 auto;
  margin-left: 6em;
}
.news_list {
  overflow: hidden;
  zoom: 1;
  margin-bottom: 32px;
}
.news_list ul{
  width: 976px;
}
.news_list ul li {
  float: left;
  width: 300px;
  border-right: 1px solid #cccccc;
  height: 487px;
  border: 1px solid #cccccc;
  margin-right: 16px;
  margin-top: 16px;
}
.news_list ul li h1 {
  font-size: 15px;
  color: #585858;
  line-height: 44px;
  padding-left: 20px;
  font-weight: bold;
}
.news_list ul li h2 {
  margin-bottom: 20px;
  height: 68px;
}
.news_list ul li h2 a {
  font-size: 16px;
  color: #000;
}
.more_btn {
  display: block;
  width: 36px;
  height: 17px;
  background: url("http://www.jyxue.com.cn/themes/default/skin/more.png") no-repeat;
  margin-top: 20px;
}
</style>